<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @touchstart.stop @click="handleHistory1">
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">{{$route.query.serviceName}}</div>
        </div>
        <div class="ui-mode-content flex1 flex-col" ref="scroll" style="margin-bottom:2.4rem;">
            <div class="service-dialogue-wrap" v-if="pageStatus">
                <div class="service-dialogue-section"
                     :key="`chat-${item.id_public_user_info}-${i}`"
                     v-for="(item,i) in chat_list">
                    <div class="service-dialogue-time" :style="item.time_display">{{item.time_insert}}</div>
                    <div class="clearfix">
                        <div class="service-dialogue-img" :style="item.float" :class="[item.marginright]">
                            <!-- <img src="../../../../assets/images/detail_company_icon.png"> -->
                        </div>
                        <div :style="item.float">
                            <div class="service-dialogue-title" :class="item.background" :style="item.time_display">
                                <i class="mar-right-10" :style="item.title_display">{{item.chat_content_remark_010}}</i>
                            </div>
                            <div class="clearfix">
                                <div class="service-dialogue-content" :class="[item.background,item.margin]" :style="item.float">{{item.chat_content}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="chat-fasong flex-row align-center-row" v-if="pageStatus">
            <div class="ui-search flex-row align-between-row align-center-row">
                <div class="ui-search-wrap flex-row align-center">
                    <input type="text" placeholder="请输入消息" @focus="changeHeight(101)" @blur="changeHeight(102)" v-model="msg">
                </div>
                <button @touchstart.stop @click="fasong"></button>
            </div>
        </div>
    </div>
</template>
<script>
    import mixinCommon from '@/views/content/mixins/common';
    import mixinRequest from '@/views/content/mixins/request';
    import {
        extend
    } from '@/utils/tool';
    export default {
        name: "my/chat/detail",
        data(){
            return {
                originalHeight:document.documentElement.clientHeight ||document.body.clientHeight,
                public_agent_info:{},
                public_user_info:{},
                chat_list:[],
                msg:'',
                bindId:'',
                int1: null  // 定时器名称
            };
        },
        mixins:[
            mixinCommon,
            mixinRequest,
        ],
        computed:{
        },
        watch:{
        },
        created(){
        },
        mounted(){
            this.init()
            window.onresize = ()=>{
                return(()=>{
                    if (document.activeElement.tagName == 'INPUT') {
                        clearTimeout(that.heightTimer);  //清除延迟执行
                        that.heightTimer = setTimeout(()=>{   //设置延迟执行
                            document.activeElement.scrollIntoView({
                                block: 'end',
                                behavior: 'smooth'
                            });
                        },500);
                    }
                })()
            }
        },
        methods:{
            changeHeight(value){
                if(this.isAndroid){
                    const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
                    clearTimeout(this.heightTimer1);  //清除延迟执行
                    this.heightTimer1 = setTimeout(()=>{   //设置延迟执行
                        if(value==101){
                            document.querySelector('body').setAttribute('style', 'height:'+(originalHeight/2)+'px;');
                        }else if(value==102){
                            document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
                        }
                        this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
                    },500);
                }
            },
            /*
             * 初始化
             */
            init(){
                this.getShopInfo().then(({result,response})=>{
                    this.getPageInfo({
                        name:'my.chat.list',
                        param:{
                            invoke_method:'public_load_chat_list',
                            id_public_user_info:this.public_user_info.id_public_user_info,
                            id_target_user:this.$route.query.serviceId,
                            pre_db_para_begin_idx:0,
                            pre_db_para_length_4_list:1000
                        }
                    }).then(({result,response})=>{
                        var list=result.page_content;
                        for(var i=0;i<list.length;i++){
                            list[i].time_display = 'display:none'
                            if(i > 1 || i === 1){
                                if(parseInt(list[i-1].type_content) !== parseInt(list[i].type_content)){
                                    list[i].time_display = 'display:block';
                                } else {
                                    if(this.dateDiff(list[i-1].time_insert,list[i].time_insert) > 1){
                                        list[i].time_display = 'display:block';
                                    }
                                }
                            } else if(i===0){
                                list[i].time_display = 'display:block';
                            }
                            list[i].float=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'float:right':'float:left';
                            list[i].marginright=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'mar-left-16':'mar-right-16';
                            list[i].title_display=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'display:none':'display:inline';
                            list[i].background=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'service-dialogue-ask':'service-dialogue-reply';
                            list[i].margin=list[i+1]&&(parseInt(list[i].type_content) !== parseInt(list[i+1].type_content))?'mar-btm-20':'mar-btm-32';
                            list[i].time_insert=this.dateDiff(this.getDateInfo(new Date()),list[i].time_insert) > 24 ? list[i].time_insert:list[i].time_insert.split(' ')[1]
                        };
                        this.chat_list=list;
                        this.refreshReviewsList();
                    });
                }).catch(({msg})=>{
                    this.showResult(msg,true);
                });
            },
            getDateInfo(date){
                return [date.getFullYear(),this.formatDate(date.getMonth()+1),this.formatDate(date.getDate())].join('-')+String.fromCharCode(32)+[this.formatDate(date.getHours()),this.formatDate(date.getMinutes()),this.formatDate(date.getSeconds())].join(':');
            },
            formatDate:function(number){//格式化数字
                return number<10?'0'+number:number;
            },
            dateDiff(sDate1, sDate2){
                var oDate1, oDate2;oDate1 = new Date(sDate1).getTime();//转换为MM-dd-yyyy格式
                oDate2 = new Date(sDate2).getTime();
                var timeSpan = {};
                var TotalMilliseconds = oDate1 - oDate2;
                if (isNaN(TotalMilliseconds)  || TotalMilliseconds<0) {
                    return null;
                }
                timeSpan.TotalHours = parseInt(TotalMilliseconds / 1000 / 60 / 60);
                return timeSpan;
            },
            /*
             * 获取门店信息
             */
            getShopInfo(){
                return new Promise((resolve,reject)=>{
                    this.$http.post({
                        name:'common.shop.info',
                        data:{
                            invoke_method:'user_and_shop_info'
                        },
                        loading:{
                            enabled:false
                        }
                    }).then(({result,response})=>{
                        this.public_agent_info=result.public_agent_info||{};
                        this.public_user_info=result.public_user_info||{};
                        this.public_goods_order_record=result.public_goods_order_record||{};
                        this.chat_obj = {
                            id_public_data_admin_user: result.public_user_info.id_public_data_admin_user,
                            id_public_user_info: result.public_user_info.id_public_user_info,
                            nick_name: result.public_user_info.nick_name,
                            phone_user: result.public_user_info.user_phone
                        }
                        this.middle_obj = {
                            id_public_data_admin_user: result.public_user_info.id_public_data_admin_user,
                            type_middle_app: 1111,
                            type_inner_app: 101,
                            is_online: 0,
                            id_public_user_info: result.public_user_info.id_public_user_info,
                            mid_table_remark_001: result.public_user_info.nick_name,
                            mid_table_remark_002: result.public_user_info.user_phone,
                        }
                        this.setState({
                            key:'public_agent_info',
                            value:this.public_agent_info
                        });
                        this.setState({
                            key:'public_user_info',
                            value:this.public_user_info
                        });
                        // this.$http.post({
                        //     name:'common.collect',
                        //     data:{
                        //         invoke_method:'public_load_middle_table_list',
                        //         pre_db_para_middle_table_name:'public_middle_table_1111',
                        //         type_middle_app:1111,
                        //         type_inner_app:101,
                        //         pre_db_para_begin_idx:0,
                        //         pre_db_para_length_4_list:1,
                        //         id_public_user_info:this.$route.query.serviceId,
                        //         id_public_user_info:result.public_user_info.id_public_user_info
                        //     },
                        //     loading:{
                        //         enabled:false
                        //     }
                        // }).then(({result,response})=>{
                        //     if(result.result_num>0){
                        //         this.bindId=result.page_content[0].id_public_middle_table;
                        //     }
                        resolve({result,response});
                        // })
                    }).catch(({msg})=>{
                        reject({msg});
                    });
                });
            },
            fasong(){
                var chat_item = this.chat_obj;
                if(!this.msg){
                    this.showToast('不能发送空白信息',false);
                    return false;
                }
                chat_item.chat_content=this.msg;
                chat_item.id_target_user=this.$route.query.serviceId;
                chat_item.type_content=201;
                chat_item.type_chat=2;
                this.$http.post({
                    name:'my.middle',
                    data:extend({
                        invoke_method: 'public_insert_or_update_middle_table',
                        pre_db_para_middle_table_name: 'public_chat_content',
                    },chat_item),
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    // if(this.bindId){
                    //     this.middle_obj.pre_db_para_id_public_middle_table=this.bindId;
                    // }
                    // this.middle_obj.mid_table_remark_031='101';//客服未读
                    // this.$http.post({
                    //     name:'common.collect',
                    //     data:extend(middle_obj,{
                    //         invoke_method:'public_insert_or_update_middle_table',
                    //         middle_table_name:'public_middle_table_1111'
                    //     }),
                    //     loading:{
                    //         enabled:false
                    //     }
                    // }).then(({result,response})=>{
                    this.msg='';
                    this.getReviewsList();
                    // })
                }).catch(({msg})=>{
                });
            },
            refreshReviewsList(){
                var that = this;
                this.int1 = setInterval( function() {
                    that.getReviewsList();
                },7000);
                this.$once('hook:beforeDestroy', () => {
                    clearInterval(this.int1);
                })
            },
            getReviewsList(){
                this.$http.post({
                    name:'my.middle',
                    data:{
                        invoke_method: 'public_load_middle_table_list',
                        pre_db_para_middle_table_name: 'public_chat_content',

                        id_public_user_info:this.public_user_info.id_public_user_info,
                        id_target_user:this.$route.query.serviceId,
                        pre_db_para_begin_idx:0,
                        pre_db_para_length_4_list:1000
                    }
                }).then(({result,response})=>{
                    var list=result.page_content;
                    for(var i=0;i<list.length;i++){
                        list[i].time_display = 'display:none'
                        if(i > 1 || i === 1){
                            if(parseInt(list[i-1].type_content) !== parseInt(list[i].type_content)){
                                list[i].time_display = 'display:block';
                            } else {
                                if(this.dateDiff(list[i-1].time_insert,list[i].time_insert) > 1){
                                    list[i].time_display = 'display:block';
                                }
                            }
                        } else if(i===0){
                            list[i].time_display = 'display:block';
                        }
                        list[i].float=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'float:right':'float:left';
                        list[i].marginright=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'mar-left-16':'mar-right-16';
                        list[i].title_display=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'display:none':'display:inline';
                        list[i].background=list[i].id_public_user_info===this.public_user_info.id_public_user_info?'service-dialogue-ask':'service-dialogue-reply';
                        list[i].margin=list[i+1]&&(parseInt(list[i].type_content) !== parseInt(list[i+1].type_content))?'mar-btm-20':'mar-btm-32';
                        list[i].time_insert=this.dateDiff(this.getDateInfo(new Date()),list[i].time_insert) > 24 ? list[i].time_insert:list[i].time_insert.split(' ')[1]
                    };
                    this.chat_list=list;
                    // var update_status={
                    //     type_middle_app:1111,
                    //     type_inner_app:101,
                    //     is_online:0,
                    //     pre_db_para_id_public_middle_table:this.bindId,
                    //     mid_table_remark_030:'102',//用户已读
                    // }
                    // if(this.bindId){
                    // 	this.$http.post({
                    //         name:'common.collect',
                    //         data:extend(update_status,{
                    //             invoke_method:'public_insert_or_update_middle_table',
                    //             middle_table_name:'public_middle_table_1111'
                    //         }),
                    //         loading:{
                    //             enabled:false
                    //         }
                    //     }).then(({result,response})=>{
                    //         this.bindId=result.page_content.id_public_middle_table;
                    //     })
                    // }
                }).catch(({msg})=>{
                });
            },
            stopReviewsList:function(){
                clearInterval(this.int1);
                this.int1 = null;
            },
            handleHistory1(){
                clearInterval(this.int1);
                this.int1 = null;
                this.$router.go(-1);
            }
        },
        components:{
        },
        beforeDestroy(){
            window.onresize = null;
            clearInterval(this.int1);
            this.int1 = null;
        }
    }
</script>
<style lang="less" scoped>
    .focusState {position: absolute;}
    img.app-image[lazy=loaded].auto {
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: auto;
    }
    .ui-mode-content{
        padding-top:.4rem;
    }
    .bgwhite{
        background-color:#fff;
    }
    .service-dialogue-wrap{
        padding:0 .64rem;
    }
    .service-dialogue-time{
        margin-bottom:.85rem;
        font-size:.58rem;
        color:#878787;
        line-height:1.2em;
        text-align:center;
    }
    .service-dialogue-img{
        width:1.81rem;
        height:1.81rem;
        img{
            display:block;
            width:100%;
            height:100%;
        }
    }
    .service-dialogue-content{
        padding:.32rem .64rem;
        font-size:.69rem;
        border-radius:.21rem;
        line-height:1.2rem;
        max-width:12.13rem;
        word-wrap:break-word;
    }
    .clearfix:after{
        content:"1";
        display:block;
        height:0px;
        clear:both;
        visibility:hidden;
    }
    .service-dialogue-title{
        margin-bottom:.43rem;
        font-size:.58rem;
        color:#666;
        line-height:1.2em;
    }
    .service-dialogue-reply.service-dialogue-content{
        background-color:#fff;
    }
    .service-dialogue-ask.service-dialogue-title{
        text-align: right;
    }
    .service-dialogue-ask.service-dialogue-content{
        background-color:#319BFF;
        color: #fff;
    }
    .mar-btm-20{
        margin-bottom:.53rem;
    }
    .mar-btm-32{
        margin-bottom:.85rem;
    }
    .mar-left-16{
        margin-left:.43rem;
    }
    .mar-right-16{
        margin-right:.43rem;
    }

    .ui-search{
        box-sizing:border-box;
        width:80%;
        height:1.6rem;
        border:.05rem solid #F0A953;
        border-radius:.8rem;
        font-size:.69rem;
        background:#F2F2F2;
        .ui-search-wrap{
            width:70%;
            height:100%;
            padding:.4rem 0;
            em{
                display:block;
                width:1.7rem;
                height:100%;
                background-size:.75rem .75rem;
                background-position:center;
                background-repeat:no-repeat;
                background-image:url(~@/assets/images/common_search_icon.png);
            }
            input{
                display:block;
                width:80%;
                height:100%;
                border:none;
                font-size:.69rem;
                color:#aaa;
                background: #F2F2F2;
            }
            input::placeholder{
                color:#aaa;
            }
        }
        button{
            display:block;
            width:2.58rem;
            height:1.28rem;
            line-height:1.28rem;
            margin-right:.16rem;
            padding:0;
            border:none;
            font-size:.69rem;
            color:#fff;
            background: linear-gradient(45deg, #F38224 0%, #F0A953 100%);
            border-radius:.64rem;
        }
    }
    .chat-fasong{
        position:absolute;
        right:0;
        bottom:0;
        left:0;
        height:2.72rem;
        padding:.43rem .85rem;
        z-index:10;
        textarea{
            width:76%;
            height:100%;
            padding:.3rem;
            border:none;
            font-size:.64rem;
            border-radius:.94rem;
        }
        .ui-search{
            position: absolute;
            width:90%;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            border:.02rem solid #C9C9CB;
            background:#FFF;
            .ui-search-wrap{
                width: 80%;
            }
            .ui-search-wrap input{
                width: 90%;
                background:#FFF;
                line-height:1.2em;
            }
        }
        button{
            width:1.39rem;
            width:1.39rem;
            margin-right:.27rem;
            background-size:100%;
            background-position:center;
            background-repeat:no-repeat;
            background-image:url(~@/assets/images/common_send_icon.png);
        }
    }
</style>